<template>

  <view>

    <view class="uni-list-cell"  v-for="(item, index) in productList" :key="item.id" >
      <view @click="next(item)" >
        <view class="list-paixu">
          <view class="topTitleV">{{item.startTime}} 一 {{item.endTime}} </view>
          <view class="topTitleVv">{{item.payTotalHour}}课时 <uni-icons class="inner" type="right"></uni-icons></view>


        </view>
        <view class="topTitleV unitV">{{item.course}}</view>



        <view
          style="display: flex; flex: 1; flex-wrap: wrap; margin-top: 0px; margin-left: -8px; height: 38px; width:calc(100vw-62px)">

          
          <view class="cellView" :style="{ color: bindColor(index), backgroundColor: bindBgColor(index) }">
            {{item.roomName}}{{item.roomId}}
          </view>
          <view class="cellView" v-if="item.status == 2"    :style="{ color: bindColors(0), backgroundColor: bindBgColors(0) }">
            已点名
          </view>
          <view class="cellView" v-else    :style="{ color: bindColors(1), backgroundColor: bindBgColors(1) }">
            未点名
          </view>
          <!-- <uni-tag text="标签" size="500rpx"></uni-tag> -->
    


        </view>

      </view>

   


    </view>

  </view>

</template>

<script>
  export default {
    props: {

      productList: {
        type: Array,
       required: true,
        default () {
          return []
        }
      },




    },

    data() {
      return {

      }
    },
    methods: {
      
  
      next(item) {
        
        
        const a=JSON.stringify(item)
        
        if(item.status == 2){
          uni.navigateTo({
            	url: '/pages/sys/clatime/updateRemember?data='+encodeURIComponent(a)
            });
        }else{
          uni.navigateTo({
            	url: '/pages/sys/clatime/remember?data='+encodeURIComponent(a)
            });
          
        }
   
      },
      bindTag(item) {

        return [item.area, item.proType, item.stage]
      },
      bindColors(index) {
        let colorArr = ['#ff0000','#ff5500'];
        return colorArr[index];
      },
      bindBgColors(index) {
        let bgColorArr = ['#ffe1e1','#ffe2ca'];
        return bgColorArr[index];
      },
      bindColor(index) {
        let colorArr = ['#4473FF', '#FFA01B', '#41D380'];
        return colorArr[index % 3];
      },
      bindBgColor(index) {
        let bgColorArr = ['#F1F4FA', '#FFF5E8', '#ECFAF2'];
        return bgColorArr[index % 3];
      },

    }
  }
</script>

<style   rel="stylesheet/scss" lang="scss" >

  .uni-list-cell {
    flex-direction: column;
    background-color: white;
    padding: 6px 12px;
    border: 2px solid #e7e7e7;
    border-radius: 3%
  }

  .inner {
    position: relative;
    top: 5.8%;
  }

  .list-paixu {
    
    display: flex;
    justify-content: space-between
  }

  .topTitleV {
    height: 40rpx;
    line-height: 40rpx;
    color: #333333;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    font-size: 35rpx;

  }

  .topTitleVv {
    height: 26rpx;
    line-height: 26rpx;
    color: #333333;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    font-size: 18rpx;


    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  .unitV {
    color: #111111;
    font-size: 20px;
    margin-top: 0px;
    font-family: PingFangSC-Regular, PingFang SC;

  }

  .cellView {
    margin-top: 8px;
    margin-left: 8px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 2px;
    padding: 0px 4px !important;
    font-size: 12px;

    color: #4272FF;
    background: #F3F4F6;
  }
</style>